<template>
  <div class="page1-container">
    <!-- banner start -->
    <div class="caption-title">
      <i class="fl"><img :src="getAssetsFile('page/title-left.png')" alt="" /></i>
      <span class="biaoti fl">数字化智能生产看板</span>
      <i class="fr"><img :src="getAssetsFile('page/title-right.png')"  alt=""/></i>
    </div>

    <div class="main">
      <div class="top databox">
        <i class="topL"></i>
        <i class="topR"></i>
        <i class="bottomL"></i>
        <i class="bottomR"></i>

        <ul class="clearfix">
          <li>
            <img :src="getAssetsFile('page/info_4.png')" alt="" />
            <div class="count">
              <p>本月总产量</p>
              <p class="conuts">16625吨</p>
            </div>
          </li>
          <li>
            <img :src="getAssetsFile('page/info_2.png')" alt="">
            <div class="count">
              <p>待产量</p>
              <p class="conuts">12536吨</p>
            </div>
          </li>
          <li>
            <img :src="getAssetsFile('page/info_7.png')" alt="" />
            <div class="count">
              <p>本月废品率</p>
              <p class="conuts_waring">废品4件，废品38.2吨，良品率98.6%</p>
            </div>
          </li>
          <li>
            <img :src="getAssetsFile('page/info_5.png')" alt="" />
            <div class="count">
              <p>设备开工率</p>
              <p class="conuts">65.6%</p>
            </div>
          </li>
          <li>
            <img :src="getAssetsFile('page/info_2.png')" alt="" />
            <div class="count">
              <p>本月延期发货</p>
              <p class="conuts">4次</p>
            </div>
          </li>
        </ul>
      </div>

      <div class="middle clearfix">
        <div class="left">
          <div class="left1 databox">
            <i class="topL"></i>
            <i class="topR"></i>
            <i class="bottomL"></i>
            <i class="bottomR"></i>
            <div class="data-title">
              <b class="data-title-left fl">[</b>
              <span>产量趋势图</span>
              <b class="data-title-right fr">]</b>
            </div>
            <PcLeft2></PcLeft2>
          </div>
          <div class="left2 databox">
            <i class="topL"></i>
            <i class="topR"></i>
            <i class="bottomL"></i>
            <i class="bottomR"></i>
            <div class="data-title">
              <b class="data-title-left fl">[</b>
              <span>事业部产量统计</span>
              <b class="data-title-right fr">]</b>
            </div>
            <PcLeft1></PcLeft1>
          </div>
        </div>
        <div class="center">
          <div class="center1 databox">
            <i class="topL"></i>
            <i class="topR"></i>
            <i class="bottomL"></i>
            <i class="bottomR"></i>
            <div class="data-title">
              <b class="data-title-left fl">[</b>
              <span>品质管理</span>
              <b class="data-title-right fr">]</b>
            </div>
            <Pc_center1></Pc_center1>
          </div>
          <div class="center2 databox">
            <i class="topL"></i>
            <i class="topR"></i>
            <i class="bottomL"></i>
            <i class="bottomR"></i>
            <div class="data-title">
              <b class="data-title-left fl">[</b>
              <span>安全生产</span>
              <b class="data-title-right fr">]</b>
            </div>
            <Pc_center2></Pc_center2>
          </div>
          <div class="center3 databox">
            <i class="topL"></i>
            <i class="topR"></i>
            <i class="bottomL"></i>
            <i class="bottomR"></i>
            <div class="data-title">
              <b class="data-title-left fl">[</b>
              <span>生产延期率</span>
              <b class="data-title-right fr">]</b>
            </div>
            <Pc_center3></Pc_center3>
          </div>
        </div>
        <div class="right">
          <div class="right1 databox">
            <i class="topL"></i>
            <i class="topR"></i>
            <i class="bottomL"></i>
            <i class="bottomR"></i>
            <div class="data-title">
              <b class="data-title-left fl">[</b>
              <span>设备开工率</span>
              <b class="data-title-right fr">]</b>
            </div>
            <PcRight1></PcRight1>
          </div>
          <div class="right2 databox">
            <i class="topL"></i>
            <i class="topR"></i>
            <i class="bottomL"></i>
            <i class="bottomR"></i>
            <div class="data-title">
              <b class="data-title-left fl">[</b>
              <span>生产能耗</span>
              <b class="data-title-right fr">]</b>
            </div>
            <PcRight2></PcRight2>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, onMounted, reactive, computed } from 'vue';
import { getAssetsFile } from '@/utils'

// 引入组件
const PcLeft1 = defineAsyncComponent(() => import('@/views/page/page1/pc_left1.vue'));
const PcLeft2 = defineAsyncComponent(() => import('@/views/page/page1/pc_left2.vue'));
const PcRight1 = defineAsyncComponent(() => import('@/views/page/page1/pc_right1.vue'));
const PcRight2 = defineAsyncComponent(() => import('@/views/page/page1/pc_right2.vue'));
const Pc_center1 = defineAsyncComponent(() => import('@/views/page/page1/pc_center1.vue'));
const Pc_center2 = defineAsyncComponent(() => import('@/views/page/page1/pc_center2.vue'));
const Pc_center3 = defineAsyncComponent(() => import('@/views/page/page1/pc_center3.vue'));
const state = reactive({
})
</script>

<style lang="less" scoped>
.page1-container{
  div{
    box-sizing: border-box;
  }
  height: 100%;
  margin: 0;
  padding: 0;
  color: #ffffff;
  background: #000c3b;

  .databox{
    border: 2px solid #032d60;
    -webkit-box-shadow: #07417a 0 0 10px;
    -moz-box-shadow: #07417a 0 0 10px;
    box-shadow: inset 0 0 30px #07417a;
    position: relative;
    .topL{width:20px;height:20px;border-top-width:2px;border-top-color:#26c6f0;border-top-style:solid;border-left-width:2px;border-left-color:#26c6f0;border-left-style:solid;position:absolute;top:-2px;left:-2px}
    .topR{width:20px;height:20px;border-top-width:2px;border-top-color:#26c6f0;border-top-style:solid;border-right-width:2px;border-right-color:#26c6f0;border-right-style:solid;position:absolute;top:-2px;right:-2px}
    .bottomL{width:20px;height:20px;border-bottom-width:2px;border-bottom-color:#26c6f0;border-bottom-style:solid;border-left-width:2px;border-left-color:#26c6f0;border-left-style:solid;position:absolute;bottom:-2px;left:-2px}
    .bottomR{width:20px;height:20px;border-bottom-width:2px;border-bottom-color:#26c6f0;border-bottom-style:solid;border-right-width:2px;border-right-color:#26c6f0;border-right-style:solid;position:absolute;bottom:-2px;right:-2px}
    .data-title-left,.data-title-right{color:#105eda;font-family:"微软雅黑";font-size:20px}
    .data-title{background-color:#000c3b;width:178px;margin:-18px auto 0 auto;color:#83c7e3;font-size:20px;}
    .data-title span{text-align:center;width:162px; display:inline-block;font-size:16px;}
  }
  .fl{
    float: left;
  }
  .fr{
    float: right;
  }

  .caption-title{
    font-size: 22px;
    font-family:"黑体";
    max-width:1160px;
    margin:0 auto;
    height:48px;
    .biaoti{
      line-height:48px;
      display:inline-block;
      margin:0; padding:0;
      width:516px;
      text-align:center;
      font-size:28px;
    }
  }

  .main{
    width: 99%;
    height: calc(100vh - 58px);
    margin: 0 auto;
    padding: 0 20px;
    overflow: hidden;

    .top{
      width: 100%;
      height: 80px;
      margin-bottom: 20px;
      margin-top: 0;
      min-width: 1366px;

      ul{
        padding: 0;
        margin: 0;
      }

      ul li{
        float: left;
        width: 20%;
        height: 80px;
        list-style: none;
        position: relative;
        img{
          position: absolute;
          top: 20px;
          left: 115px;
        }
        .count{
          position: absolute;
          top: 0;
          left: 165px;
          p.conuts{
            color: #00fbfe;
            text-shadow: 0 0 25px #00fbfe;
            font-size: 18px;
            font-weight: bolder;
          }
          p.conuts_waring{
            color: #f10631;
            text-shadow: 0 0 25px #f10631;
            font-size: 12px;
            font-weight: bolder;
          }
        }
      }
    }

    .middle{
      height: calc(100% - 100px);
      .left{
        float: left;
        width: 35%;
        height: 100%;
        margin-right: 1%;
        .left1{
          height: 51%;
          margin-bottom: 4%;
        }
        .left2{
          height: 45%;
        }
      }
      .center{
        float: left;
        width: 28%;
        height: 100%;
        margin-right: 1%;
        .center1{
          height: 35%;
          margin-bottom: 3%;
        }
        .center2{
          height: 33%;
          margin-bottom: 3%;
        }
        .center3{
          height: 27%;
        }
      }
      .right{
        float: right;
        width: 35%;
        height: 100%;

        .right1{
          height: 45%;
          margin-bottom: 4%;
        }
        .right2{
          height: 51%;
        }
      }
    }
  }


}
</style>
